<template>
  <div class="container">
      <el-row>
        <el-col :span="16" :offset="4">
          <el-row class="navbar">
            <el-col :offset="4">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/news' }">新闻中心</el-breadcrumb-item>
                <el-breadcrumb-item>新闻列表</el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :offset="4" :span="20">
              <p></p>
            </el-col>
          </el-row>
          <el-row class="newsContent" :gutter="20">
            <el-col :span="4">
                <el-menu
                  default-active="0"
                  class="el-menu-vertical-demo"
                  @select="handleSelect">
                  <el-menu-item index="0">
                    <i class="el-icon-news"></i>
                    <span slot="title">所有新闻</span>
                  </el-menu-item>
                  <el-menu-item index="1">
                    <i class="el-icon-news"></i>
                    <span slot="title">公司新闻</span>
                  </el-menu-item>
                  <el-menu-item index="2" >
                    <i class="el-icon-news"></i>
                    <span slot="title">行业新闻</span>
                  </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="20">
              <el-row>
                <el-col>
                    <ul class="newsList">
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/newsdetail/1">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/newsdetail/12">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                        <li>
                            <el-col :span="1"><el-tag color="#fb7e00cf">1</el-tag></el-col>
                            <el-col :span="19"><a href="/">宝安开展机动车维修企业环保专项执法行动，拟立案处罚4家汽修企业</a></el-col>
                            <el-col :span="4"><span class="time">2020-01-15 14:35:30</span></el-col>
                        </li>
                    </ul>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="20">
                <el-row type="flex" justify="end">
                    <el-col :span="20">
                        <Pagination :total="45" @switch-page="switchPage"/>
                    </el-col>
                </el-row>
            </el-col>
          </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {  },
    name:'contact',
    data(){
        return{
            reqParm:{
                pageNum: 1,
                total: 0,
            }
        }
    },
    methods:{
        handleSelect(){

        },
        //每页条数改变时触发 选择一页显示多少行
        switchPage(value) {
            this.reqParm.pageNum=value
        },
    }
}
</script>

<style lang="scss" scoped>
.container{
    .navbar{
        margin: 20px 0px;
        p{
            height: 10px;
            border-bottom: 2px solid #ccc;
        }
    }
    .newsContent{
        min-height: 660px;
        .newsList{
            li{
                line-height: 40px;
                height: 40px;
                white-space: nowrap;
                border-bottom: 1px solid #eee;
            }
            a{
                text-decoration: none;
                text-overflow: ellipsis;
                overflow: hidden;
                display: block;
            }
            .time{
                color: #ccc;
                text-overflow: ellipsis;
                overflow: hidden;
                display: block;
            }
        }
    }
}
</style>